import styles from './index.module.scss';
import Image from 'next/image';
import AliIcon from '@components/aliIcon';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import Calendar from '@components/calendar';
import techList from '@config/techStacks.config';

const Home = () => {

	const [date, setDate] = useState('');

	useEffect(() => { 
		let timer: any = null;
		let start = 0;
		function clock() {
			let end = Date.now();
			if (end - start >= 1000) {
				start = end;
				setDate(dayjs().format('HHmmss'));
			}
			timer = requestAnimationFrame(clock);
		}
		clock();

		return () => {
			cancelAnimationFrame(timer);
		}
	}, [])

	return <div className={styles.wrap}>
		<div className={styles.personal_msg}>
			<div className={styles.avatar}>
				<Image alt='avatar' width={120} height={120} priority={true}
					src='https://github-production-user-asset-6210df.s3.amazonaws.com/58798241/238005902-1bf8f521-a1a6-4c71-af62-c5dbf18644b5.gif'
				/>
			</div>
			<div className={styles.nick_wrap}>
				<div className={styles.nick}>
					<AliIcon icon='icon-nicheng' />
				</div>
				<span>进击的小拽</span>
			</div>
			<div className={styles.blog_wrap}>
				<div className={styles.blog}>
					<AliIcon icon='icon-boke' />
				</div>
				<a href="https://blog.csdn.net/tuzi007a?type=blog" target='_blank'>我的CSDN博客</a>
			</div>
			<div className={styles.tech_wrap}>
				<div className={styles.tech}>
					<AliIcon icon='icon-daima' />
				</div>
				<span>我的技术栈</span>
			</div>
			<p className={styles.tech_intro}>
				{
					techList.map((v, i) => {
						return <span key={i}>{v.tech}</span>
					})
				}
			</p>
		</div>
		<div className={styles.container}>
			<div className={styles.clock_wrap}>
				<p className={styles.clock}>{date[0]}</p>
				<p className={styles.clock}>{date[1]}</p>
				:
				<p className={styles.clock}>{date[2]}</p>
				<p className={styles.clock}>{date[3]}</p>
				:
				<p className={styles.clock}>{date[4]}</p>
				<p className={styles.clock}>{date[5]}</p>
			</div>
			<div className={styles.line}></div>
			<Calendar />
		</div>
	</div>
}

export default Home;